import React, { useState, useEffect } from "react";
import {
  getBookDetail,
  getBookComment,
  upAction,
} from "../../../components/api";
import { useParams } from "react-router-dom";
import style from "./bookDetail.module.css";
import { Toast, Popup, TextArea } from "antd-mobile";
import axios from "axios";
import { useSelector } from "react-redux";
import Back from "../back";
import moment from "moment";
import {
  RightOutline,
  AddSquareOutline,
  UpOutline,
  DownOutline,
  HeartFill,
} from "antd-mobile-icons";
const {
  bookHead,
  bookCon,
  commentStyle,
  bookDeFoot,
  comment,
  commentDiv,
  div,
  readmore,
  commentDivTop,
  commentDivBot,
} = style;

// interface IProp{
//   id:number
// }
interface IBookDe {
  id?: number;
  name?: string;
  author?: string;
  [propName: string]: any;
}
interface IComment {
  content: string;
  id: number;
  [propName: string]: any;
}
export default function BookDetail() {
  const { id }: any = useParams();
  const user = useSelector((state) => (state as any).user);
  // console.log(user);
  const [visible1, setVisible1] = useState(false);
  let [commentList, setCommentList] = useState<IComment[]>([]);
  const [value, setValue] = useState("");
  let [bookDe, setBookDe] = useState<IBookDe>({});
  let [readMore, setReadMore] = useState(false);

  const up_action = async (item: any, i: any) => {
    if (item.uped) {
      Toast.show({
        content: "您已经赞过了",
      });
    } else {
      Toast.show({
        content: "点赞成功",
      });
    }
    // console.log(item);
    let res = await upAction(
      item.id,
      item.uped ? item.up : item.up + 1,
      item.uped ? item.uped : !item.uped
    );

    getComment();
    // console.log(res, "up");
  };

  const getBook_detail = async () => {
    let res = await getBookDetail(id);
    // console.log(res, "bookMes")
    setBookDe(res.data[0]);
  };
  //获取评论列表
  const getComment = async () => {
    let res = await getBookComment(id);
    console.log(id, "id");
    // console.log(res, "comment");
    setCommentList(res.data);
  };
  // 加入书架
  const addBook = () => {
    // console.log(bookDe)
    const get = async () => {
      let res = await axios
        .post("http://127.0.0.1:8090/book_shelf", {
          id: bookDe.id,
          name: bookDe.name,
          author: bookDe.author,
          cover: bookDe.cover,
        })
        .then();
      console.log(res, "99");
    };
    get();
    Toast.show({
      icon: "success",
      content: "已加入书架",
    });
  };

  // 提交评论
  const submit = async (val: any) => {
    // console.log("点击了");
    let res = await axios.post("http://127.0.0.1:8090/comment", {
      content: val,
      book_id: bookDe.id,
      user_id: user.id,
      avatar_url: user.avatar_url,
      create_time: Date.now(),
      username: user.username,
      up: 0,
      uped: false,
    });
    console.log(res);
    setVisible1(false);
    setValue("");
    getComment();
  };
  useEffect(() => {
    getBook_detail();
    getComment();
  }, []);
  return (
    <div className={div}>
      <div
        style={{
          height: 150,
          backgroundColor: "#444",
          position: "relative",
          padding: 10,
          color: "#fff",
        }}
      >
        <Back></Back>
        <div className={bookHead}>
          <img src={bookDe.cover} alt="" width="90" height="100px" />
          <h5>
            {bookDe.name}
            <p>{bookDe.label}</p>
            <span>￥{bookDe.price}</span>
          </h5>
        </div>
      </div>
      <div className={bookCon}>
        <ul>
          <li>
            <div>
              {readMore ? bookDe.brief : `${bookDe.brief?.substring(0, 78)}...`}
              <i onClick={() => setReadMore(!readMore)} className={readmore}>
                {readMore ? <UpOutline /> : <DownOutline />}
              </i>
            </div>
          </li>
          <li>
            <p>
              作者
              <b>{bookDe.author}</b>
            </p>
            <span>
              TA的作品
              <RightOutline />
            </span>
          </li>
          <li>
            <p>目录</p>
            <span>
              共{bookDe.catalog?.length}章
              <RightOutline />
            </span>
          </li>
          <li>
            <p>
              评论
              <b>{commentList?.length}</b>
            </p>
            <span
              onClick={() => {
                user.id
                  ? setVisible1(true)
                  : Toast.show({
                      content: "请登录",
                    });
              }}
              className={commentStyle}
            >
              写评论
            </span>
            <Popup
              visible={visible1}
              onMaskClick={() => {
                setVisible1(false);
              }}
              bodyStyle={{ height: "40vh" }}
            >
              {
                <div className={comment}>
                  <p>
                    <span>取消</span>
                    <b>发表评论</b>
                    <span onClick={() => submit(value)}>提交</span>
                  </p>
                  <TextArea
                    placeholder="我说两句奥"
                    value={value}
                    onChange={(val) => {
                      setValue(val);
                    }}
                  />
                </div>
              }
            </Popup>
          </li>
        </ul>
        <ul className={commentDiv}>
          {commentList.map((item, i) => (
            <li key={item.id}>
              <div style={{ width: "100%" }}>
                <div className={commentDivTop}>
                  <img src={item.avatar_url} alt="" />
                  <span>{item.username} </span>
                  <b>
                    <HeartFill
                      style={{ color: item.uped ? "red" : "black" }}
                      onClick={() => {
                        // console.log(111);
                        user.id
                          ? up_action(item, i)
                          : Toast.show({
                              content: "请登录",
                            });
                      }}
                    />
                    {item.up === 0 ? "" : item.up}
                  </b>
                </div>
                <div style={{ paddingLeft: 30 }}>
                  <p>{item.content}</p>
                  <div className={commentDivBot}>
                    <span>
                      {moment(item.create_time).format("YYYY - MM - DD")}
                    </span>
                    <b>回复</b>
                  </div>
                </div>
              </div>
            </li>
          ))}
        </ul>
      </div>
      <div className={bookDeFoot}>
        <div>
          <AddSquareOutline fontSize={18} />
          <p onClick={() => addBook()}>加入书架</p>
        </div>
        <button>免费试读</button>
        <button
          onClick={() => {
            Toast.show({
              icon: "success",
              content: "购买成功",
            });
          }}
        >
          立即购买
        </button>
      </div>
    </div>
  );
}
